<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: temp == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="temp == 0"></Nodata>
  </div>
</template>


<script>
import { mapState, mapActions, mapGetters } from "vuex";
import fontSize from "@/modules/fontSize";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
    },
    color: {
      // 颜色数据
      type: Array | Object,
    },
    rotate: {
      // X轴是否旋转
      type: Number | String,
      default: 0,
    },
    yAxisLabel: {
      // Y轴是否显示
      type: Boolean,
      default: false,
    },
    topNumber: {
      // X轴上方显示数值
      type: Boolean,
      default: false,
    },
    gridRight: {
      // 整体距离右边距
      type: Number | String,
      default: "4%",
    },
    legend: {
      // legend是否显示
      type: Boolean,
      default: false,
    },
    splitLine: {
      // Y轴横线是否显示
      type: Boolean,
      default: false,
    },
    isIndex: {
      // X轴是否显示下标
      type: Boolean,
      default: false,
    },
    gridBottom: {
      // 整体距离下边距
      type: Number | String,
      default: "18%",
    },
  },
  computed: {
    ...mapGetters(["echartsColor"]),
  },
  watch: {
    rotate: "drawLine", // 数值变化是更新图表
    yAxisLabel: "drawLine", // 数值变化是更新图表
    topNumber: "drawLine", // 数值变化是更新图表
    rotate: "drawLine", // 数值变化是更新图表
    gridRight: "drawLine", // 数值变化是更新图表
    legend: "drawLine", // 数值变化是更新图表
    splitLine: "drawLine", // 数值变化是更新图表
    gridBottom: "drawLine", // 数值变化是更新图表
    isIndex: "drawLine", // 数值变化是更新图表
    echartsColor: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
  },
  data() {
    return {
      temp: 0,
    };
  },
  mounted() {},
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          this.temp = 0;
          var _this = this;
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          var xData = [];
          var yData = [];
          let maxNum = 100;
          for (let i in this.data) {
            xData.push(this.data[i].日期);
            yData.push(Math.ceil(this.data[i].案件总数));
          }
          maxNum = Math.max(...yData) * 2;
          for (var i = yData.length - 1; i >= 0; i--) {
            this.temp += yData[i];
          }
          let xLabel = xData;
          let option = {
            tooltip: {},
            // backgroundColor: "none",
            animation: false,
            grid: {
              top: "25%",
              left: "10%",
              right: "6%",
              bottom: "26%", //也可设置left和right设置距离来控制图表的大小
            },
            xAxis: {
              data: xLabel,
              axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                  color: "#11417a",
                },
              },
              axisTick: {
                show: false, //隐藏X轴刻度
              },
              axisLabel: {
                show: true,
                // margin: 14,
                fontSize: 11,
                textStyle: {
                  color: this.echartsColor, //X轴文字颜色
                },
                rotate: 20,
              },
            },
            yAxis: [
              {
                type: "value",
                minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数
                // gridIndex: 0,
                // min: 0,
                // max: maxNum,
                // interval: 25,
                // splitNumber: 4,
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#113763",
                    width: 1,
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#11417a",
                  },
                },
                axisLabel: {
                  show: true,
                  //   margin: 14,
                  fontSize: 11,
                  textStyle: {
                    color: this.echartsColor, //X轴文字颜色
                  },
                },
              },
            ],
            series: [
              {
                name: "数量",
                type: "bar",
                barWidth: 15,
                itemStyle: {
                  normal: {
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#8AC5FF",
                        },
                        {
                          offset: 1,
                          color: "#182851",
                        },
                      ]
                    ),
                  },
                },
                data: yData,
                z: 10,
                zlevel: 0,
                label: {
                  show: false,
                  position: "top",
                  distance: 10,
                  fontSize: 11,
                  color: "#8AC5FF",
                },
              },
              {
                // 分隔
                type: "pictorialBar",
                itemStyle: {
                  normal: {
                    color: "#0F375F",
                  },
                },
                symbolRepeat: "fixed",
                symbolMargin: 6,
                symbol: "rect",
                symbolClip: true,
                symbolSize: [20, 2],
                symbolPosition: "start",
                symbolOffset: [0, -1],
                // symbolBoundingData: this.total,
                // data: [20, 80, 100, 40, 34, 90, 60],
                width: 25,
                z: 0,
                zlevel: 1,
              },
            ],
          };

          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>